<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<!-- 用户的登录界面 -->
<html lang="zh">

<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JCP科技</title>

<link rel="stylesheet" type="text/css" href="css/logincss/normalize.css" />
<link rel="stylesheet" type="text/css" href="css/logincss/default.css">
<script src='js/loginjs/prefixfree.min.js'></script>
<link rel="stylesheet" type="text/css" href="css/logincss/styles.css">

<link rel="stylesheet" type="text/css" href="css/logincss/dialog.css" />
<link rel="stylesheet" type="text/css" href="css/logincss/dialog-wilma.css" />
<!-- 戴布斯：添加alert的样式 -->
<link rel="stylesheet" type="text/css" href="css/logincss/alert.css" />

<script type="text/javascript" src="js/loginjs/modernizr.custom.js"></script>
<script type="text/javascript" src="js/loginjs/classie.js"></script>
<script type="text/javascript" src="js/loginjs/dialogFx.js"></script>
<!-- 戴布斯：添加jquery -->
<script type="text/javascript" src="js/loginjs/jquery-2.0.3.js"></script>
</head>

<body>

	<div id="logo">
		<h1 class="hogo">
			<i> JCP 科技有限公司</i>
		</h1>
	</div>
	<section class="stark-login">
	<form action="loginservlet?op=login" method="post">
		<div id="fade-box">
			<input type="text" id="用户名" name="account" placeholder="用户名/邮箱" required>
			<input type="password" placeholder="密码" name="pwd" required>
			<input type="submit" style="display: inline-block; width: 196px; float: left; margin-left: 47px;" value="密码登录" onclick="load()">
			<!-- 戴布斯：添加提示弹框 -->
			<div class="alert"></div>
			<!-- 戴布斯：添加onclick="openCamera()" -->
			<input type="button" style="display: inline-block; width: 196px; float: left; value: 登录; margin-left: 8px;" value="面部识别" data-dialog="somedialog" onclick="openCamera()">



			<!--   <button width="50%">登录</button>  <button width="50%">刷脸</button>  -->
			<!-- display:inline -->
	</form>
	</div>
	<!-- 弹窗 -->
	<div id="somedialog" class="dialog" style="z-index: 999;">
		<div class="dialog__overlay"></div>
		<div class="dialog__content"">
			<div class="morph-shape">
				<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 460 388" preserveAspectRatio="none" style="background: linear-gradient(#004746, #111111);"> <rect x="3" y="3" fill="none" width="456px" height="383px" color="red" /> </svg>
			</div>
			<!-- 弹出层的内容 -->
			<div class="dialog-inner">

				<div id="dialog-in">
					<div id="media">
						<h1 style="height: 20px; margin: 0px; padding: 0px; color: #00fffd">
							<strong>JCP</strong>
							人脸识别
						</h1>
						<video id="video" width="300px" height="196px" autoplay></video>
						<br />
						<!-- 戴布斯：修改canvas为hidden -->
						<canvas id="canvas" width="530" height="300" hidden="hidden"></canvas>
						<!-- 摄像头画面的js -->
						<!-- 戴布斯：重命名loginvideo.js -->
						<script src="js/loginjs/loginvideo.js"></script>
					</div>
					<!-- 戴布斯：添加onclick="takePhoto()" -->
					<button data-dialog-close onclick="takePhoto()">刷脸登录</button>
				</div>

			</div>
		</div>
	</div>

	<div class="hexagons">
		<span>&#x2B22;</span>
		<span>&#x2B22;</span>
		<span>&#x2B22;</span>
		<span>&#x2B22;</span>
		<span>&#x2B22;</span>
		<span>&#x2B22;</span>
		<span>&#x2B22;</span>
		<span>&#x2B22;</span>
		<span>&#x2B22;</span>
		<span>&#x2B22;</span>
		<span>&#x2B22;</span>
		<span>&#x2B22;</span>
		<br>
		<span>&#x2B22;</span>
		<span>&#x2B22;</span>
		<span>&#x2B22;</span>
		<span>&#x2B22;</span>
		<span>&#x2B22;</span>
		<span>&#x2B22;</span>
		<span>&#x2B22;</span>
		<span>&#x2B22;</span>
		<span>&#x2B22;</span>
		<span>&#x2B22;</span>
		<span>&#x2B22;</span>
		<br>
		<span>&#x2B22;</span>
		<span>&#x2B22;</span>
		<span>&#x2B22;</span>
		<span>&#x2B22;</span>
		<span>&#x2B22;</span>
		<span>&#x2B22;</span>
		<span>&#x2B22;</span>
		<span>&#x2B22;</span>
		<span>&#x2B22;</span>
		<span>&#x2B22;</span>
		<span>&#x2B22;</span>
		<span>&#x2B22;</span>
		<br>
		<span>&#x2B22;</span>
		<span>&#x2B22;</span>
		<span>&#x2B22;</span>
		<span>&#x2B22;</span>
		<span>&#x2B22;</span>
		<span>&#x2B22;</span>
		<span>&#x2B22;</span>
		<span>&#x2B22;</span>
		<span>&#x2B22;</span>
		<span>&#x2B22;</span>
		<span>&#x2B22;</span>
		<br>
		<span>&#x2B22;</span>
		<span>&#x2B22;</span>
		<span>&#x2B22;</span>
		<span>&#x2B22;</span>
		<span>&#x2B22;</span>
		<span>&#x2B22;</span>
		<span>&#x2B22;</span>
		<span>&#x2B22;</span>
		<span>&#x2B22;</span>
		<span>&#x2B22;</span>
		<span>&#x2B22;</span>
		<span>&#x2B22;</span>
	</div>
	</section>

	<div id="circle1">
		<div id="inner-cirlce1">
			<h2></h2>
		</div>
	</div>
	<ul>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
	</ul>

	<script type="text/javascript">
		(function() {

			var dlgtrigger = document.querySelector('[data-dialog]'), somedialog = document
					.getElementById(dlgtrigger.getAttribute('data-dialog')), dlg = new DialogFx(
					somedialog);

			dlgtrigger.addEventListener('click', dlg.toggle.bind(dlg));

		})();
	</script>
</body>

</html>